<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/css/index.css">
    <link rel="stylesheet" href="/static/css/movies.css">
    <link rel="stylesheet" href="/static/css/clear.css">
    <link th:href="@{/static/css/jquery.pagination.css}" rel="stylesheet">
    <script src="/static/js/jquery-1.12.2.js"></script>

    <title>电影</title>
    <link rel="icon" href="/static/images/title-lolg.png">
</head>

<body>
<!-- 页面头部 -->
<div th:replace="/common/head::#header"></div>
<!-- 导航 -->
<div class="movies-nav">
    <div class="nav-body">
        <div class="hotshowing  ">
            <a href="javascript:void(0)" class="movieShow active" movieShow="1">
                正在热映
            </a>
        </div>
        <div class="willshow showType">
            <a href="javascript:void(0)" class="movieShow" movieShow="2">
                即将上映
            </a>
        </div>
        <div class="oldmovie showType">
            <a href="javascript:void(0)" class="movieShow" movieShow="3">
                经典影片
            </a>
        </div>
    </div>
</div>
<!-- 电影分类列表 -->
<div class="movie-list">
    <div class="list-body">
        <div class="list-model">
            <div class="name">
                类型:
            </div>
            <input type="hidden" id="currentMovieType" th:value="${param.movieType}">
            <ul class="tags">
                <li class="tag-click movieType" id="movieTypeAll">
                    <a href="javascript:void(0);" typeid="0">全部</a>
                </li>
                <li class="tag-click movieType" th:each="movieType:${movieTypes}">
                    <a href="javascript:void(0);" th:typeid="${movieType.id+''}" th:text="${movieType.type}">爱情</a>
                </li>

            </ul>
        </div>
        <div class="list-model">
            <div class="name">
                区域:
            </div>
            <input type="hidden" id="currentMovieArea" th:value="${param.movieArea}">
            <ul class="tags">
                <li class="tag-click movieArea " id="movieAreaAll">
                    <a href="javascript:void(0);">全部</a>
                </li>
                <li class="tag-click movieArea" th:each="movieArea:${movieAreas}">
                    <a href="javascript:void(0);" th:areaId="${movieArea.id+''}" th:text="${movieArea.area}">大陆</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 排序方式 -->
    <div class="sort">
        <div class="sort-model">
            <input type="radio" name="movieSort" value="1" class="sort-icon" checked></input>
            <span>按热门排序</span>
        </div>
        <div class="sort-model">
            <input type="radio" name="movieSort" value="2" class="sort-icon"></input>
            <span>按时间排序</span>
        </div>
        <div class="sort-model">
            <input type="radio" name="movieSort" value="3" class="sort-icon"></input>
            <span>按评论排序</span>
        </div>
    </div>

</div>
<!-- 电影列表 -->
<div class="movies-body">
    <ul id="movies-body" th:if="${page.getRecords()!=null}">
        <li class="othermovie-model" th:each="movie:${page.getRecords()}">
            <a th:href="${'/movie/detail/'+movie.id}">
                <img alt="天气之子海报封面" th:src="${movie.previewUrl}" style="height: 221px;">
                <p th:text="${movie.name}">天气之子</p>
            </a>
            <i th:text="${movie.grade==0?'暂无评论':movie.grade}">9.2</i>
            <i class="mix2d"></i>
        </li>
    </ul>

    <ul id="movies-body" th:if="${page.getRecords().size()==0 || page.getRecords()==null}">
        <p>抱歉，没有找到相关结果，请尝试用其他条件筛选。</p>
    </ul>

    <!-- 分页 -->
    <div class="text-center" style="margin-left: 520px">
        <div id="pagination3" th:if="${page.getRecords()!=null}" class="page fl"></div>
    </div>

    <input type="hidden" id="pageNum" th:value="${param.pageNum}">

</div>
<!-- 页面底部 -->
<div th:replace="common/bottom::#bottom"></div>


<script src="/static/js/ajax.js"></script>
<script src="/static/js/mock-min.js"></script>
<script src="/static/js/server.js"></script>
<script th:src="@{/static/js/jquery.pagination.min.js}"></script>
</body>

<script>
    //类型点击
    $(function () {
        //回显类型数据
        var typeId = $("#currentMovieType").val();
        //移除全部的选中状态
        $(".tag-click.movieType").removeClass("active")
        //是否显示全部
        if (typeId == null || typeId == '') {
            $("#movieTypeAll").addClass("active")
        } else {
            $(".tag-click.movieType").each(function () {
                var currentTypeId = $(this).children("a").attr("typeid")
                if (currentTypeId == typeId) {
                    $(this).addClass("active")
                }
            })
        }

        //回显区域数据
        var areaId = $("#currentMovieArea").val();
        //移除全部的选中状态
        $(".tag-click.movieArea").removeClass("active")
        //是否显示全部
        if (areaId == null || areaId == '') {
            $("#movieAreaAll").addClass("active")
        } else {
            $(".tag-click.movieArea").each(function () {
                var currentAreaId = $(this).children("a").attr("areaId")
                console.log(currentAreaId)
                console.log(areaId)
                if (currentAreaId == areaId) {
                    $(this).addClass("active")
                }
            })
        }

        //回显排序类型
        var movieSort = "[[${param.movieSort}]]"
        if (movieSort == 0 || movieSort == '') {
            $(".sort-icon").eq(0).prop("checked","checked")
        } else {
            $(".sort-icon").each(function () {
                if ($(this).val()==movieSort){
                    $(this).prop("checked","checked")
                }
            })
        }

        // //回显显示类型
        $(".movieShow").removeClass("active")
        var movieShow = "[[${param.movieShow}]]"
        if (movieShow == 1 || movieShow == '') {
            $(".movieShow").eq(0).addClass("active")
        } else {
            $(".movieShow").each(function () {
                if (movieShow==$(this).attr("movieShow")){
                    $(this).addClass("active")
                }
            })
        }



        // 类型点击事件
        $(".tag-click.movieType").click(function () {
            //判断当前点击的是够为全部
            var hrefAddress = "/movie/movies?";
            var typeId = $(this).children("a").attr("typeid")
            if (typeId != null && typeId != '0') {
                hrefAddress += "movieType=" + typeId + "&"
            }
            var movieArea = getArea();
            if (movieArea != null) {
                hrefAddress += "movieArea=" + movieArea + "&";
            }
            var showType = getMovieShow();
            if (showType != 1) {
                hrefAddress += "movieShow=" + showType + "&";
            }
            var movieSort = getMovieSort();
            if (movieSort != 1) {
                hrefAddress += "movieSort=" + movieSort + "&"
            }
            location.href = hrefAddress
        })

        //点击区域
        $(".tag-click.movieArea").click(function () {
            //判断当前点击的是够为全部
            var hrefAddress = "/movie/movies?";
            var areaId = $(this).children("a").attr("areaId")
            if (areaId != null && areaId != '0') {
                hrefAddress += "movieArea=" + areaId + "&"
            }
            var movieArea = getType();
            if (movieArea != null) {
                hrefAddress += "movieType=" + movieArea + "&";
            }
            var showType = getMovieShow();
            if (showType != 1) {
                hrefAddress += "movieShow=" + showType + "&";
            }
            var movieSort = getMovieSort();
            if (movieSort != 1) {
                hrefAddress += "movieSort=" + movieSort + "&"
            }
            location.href = hrefAddress
        })

        //点击排序
        $(".sort-icon").click(function () {
            //判断当前点击的是够为全部
            var hrefAddress = "/movie/movies?";
            var movieType = getType();
            if (movieType != null) {
                hrefAddress += "movieType=" + movieType + "&";
            }

            var movieArea = getArea();
            if (movieArea != null) {
                hrefAddress += "movieArea=" + movieArea + "&";
            }

            var showType = getMovieShow();
            if (showType != 1) {
                hrefAddress += "movieShow=" + showType + "&";
            }

            var movieSort = getMovieSort();
            if (movieSort != 1) {
                hrefAddress += "movieSort=" + movieSort + "&"
            }
            location.href = hrefAddress
        })

        //显示电影类型 正在热映 即将上映 热播电影
        $(".movieShow").click(function () {
            //判断当前点击的是够为全部
            var hrefAddress = "/movie/movies?";
            var movieType = getType();
            if (movieType != null) {
                hrefAddress += "movieType=" + movieType + "&";
            }

            var movieArea = getArea();
            if (movieArea != null) {
                hrefAddress += "movieArea=" + movieArea + "&";
            }

            var movieShow = $(this).attr("movieShow");
            if (movieType != 1) {
                hrefAddress += "movieShow=" + movieShow + "&";
            }
            var movieSort = getMovieSort();
            if (movieSort != 1) {
                hrefAddress += "movieSort=" + movieSort + "&"
            }
            location.href = hrefAddress
        })


    })


    function getType() {
        var type = $(".movieType.active").children("a").html().trim();
        if (type == "全部") {
            return null;
        } else {
            var typeId = $(".movieType.active").children("a").attr("typeid");
            return typeId;
        }

    }

    function getArea() {
        let area = $(".movieArea.active").children("a").html().trim();
        if (area == "全部") {
            return null;
        } else {
            var areaId = $(".movieArea.active").children("a").attr("areaid");
            return areaId;
        }
    }

    function getMovieShow() {
        var movieShow = $(".movieShow.active").attr("movieShow");
            return movieShow;

    }

    function getMovieSort() {
        var movieSort = $('input:radio:checked').val()
        return movieSort;
    }

    $(function () {
        $("#pagination3").pagination({
            currentPage: [[${page.current}]],
            totalPage: [[${page.total%6==0?page.total/6:page.total/6+1}]],
            isShow: true,
            count: 5,
            homePageText: "首页",
            endPageText: "尾页",
            prevPageText: "上一页",
            nextPageText: "下一页",
            callback: function (current) {
                /**
                 * 回调函数，请求数据
                 * current为页面数
                 */
                if ($("#search").val()=="" || $("#search").val()==null){
                   var pageNum = $("#pageNum").val();
                    let href = location.href;
                    if (pageNum=='' || pageNum==null){
                        //为空 拼接
                       href+="pageNum="+current;
                       location.href=href;
                   }else {
                       //不为空 替换
                        let number = href.toString().indexOf("pageNum");
                        //截取pageNum=x字符串
                        let s1 = href.substring(number,number+9);
                        //替换
                        let s = href.replace(s1,"pageNum="+current);
                        location.href=s;
                   }
                }
            }
        });

        $("#getPage").on("click", function () {
            var info = $("#pagination3").pagination("getPage");
            alert("当前页数：" + info.current + ",总页数：" + info.total);
        });

        $("#setPage").on("click", function () {
            $("#pagination3").pagination("setPage", 1, 10);
        });
    });

</script>

</html>